﻿<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/reset.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/login.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
</head>
<body>
<div class="page">
    <div class="loginwarrp">
        <div class="logo">忘记密码</div>
        <div class="login_form">
            <p id="tip" style="color: red"></p>
            <form id="Login" name="Login">
                <div class="login-item">
                    <span>用户名：</span>
                    <input type="text" id="username" name="username" class="login_input">
                    <span id="count-msg" class="error"></span>
                </div>
                <li class="login-item">
                    <span>QQ：</span>
                    <input type="text" id="qq" name="qq" class="login_input">
                    <span id="qq-msg" class="error"></span>
                </li>
                <li class="login-item">
                    <span>新密码：</span>
                    <input type="password" id="password" name="newPassword" class="login_input">
                    <span id="password-msg" class="error"></span>
                </li>
                <li class="login-item">
                    <span>重复密码：</span>
                    <input type="password" id="repassword" name="repassword" class="login_input">
                    <span id="repassword-msg" class="error"></span>
                </li>
                <li class="login-sub">
                    <button type="button" id="login-btn">修改密码</button>
                    <button type="reset">重置</button>
                </li>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        var config = {
            vx: 4,
            vy: 4,
            height: 2,
            width: 2,
            count: 100,
            color: "121, 162, 185",
            stroke: "100, 200, 180",
            dist: 6000,
            e_dist: 20000,
            max_conn: 10
        }
        CanvasParticle(config);
    }

    $(function(){
        $('#username').focus().blur(checkName);
        $('#password').blur(checkPassword);
        $('#qq').blur(checkQQ);
        $('#repassword').blur(checkRePassword);
    });

    function checkName(){
        var name = $('#username').val();
        if(name == null || name == ""){
            //提示错误
            $('#count-msg').html("用户名不能为空");
            return false;
        }
        var reg = /^\w{3,10}$/;
        if(!reg.test(name)){
            $('#count-msg').html("输入3-10个字母或数字或下划线");
            return false;
        }
        $('#count-msg').empty();
        return true;
    }

    function checkPassword(){
        var password = $('#password').val();
        if(password == null || password == ""){
            //提示错误
            $('#password-msg').html("密码不能为空");
            return false;
        }
        var reg = /^\w{3,10}$/;
        if(!reg.test(password)){
            $('#password-msg').html("输入3-10个字母或数字或下划线");
            return false;
        }
        $('#password-msg').empty();
        return true;
    }

    function checkQQ(){
        var password = $('#qq').val();
        if(password == null || password == ""){
            //提示错误
            $('#qq-msg').html("QQ不能为空");
            return false;
        }
        var reg = /^\d{5,12}$/;
        if(!reg.test(password)){
            $('#qq-msg').html("输入5-12个数字");
            return false;
        }
        $('#qq-msg').empty();
        return true;
    }

    function checkRePassword(){
        var password = $('#password').val();
        var repassword = $('#repassword').val();
        if(password != repassword){
            //提示错误
            $('#repassword-msg').html("两次密码输入不一致");
            return false;
        }
        $('#repassword-msg').empty();
        return true;
    }


    $(function () {
        $('#login-btn').click(function () {
            if (checkName() && checkPassword() && checkQQ() && checkRePassword()) {
                let fields = $('form').serializeArray();
                let obj = {}; //声明一个对象
                $.each(fields, function(index, field) {
                    obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
                })
                console.log(obj)
                $.post('<%=request.getContextPath()%>/api/user/updatePassword',obj,function (resp) {
                    console.log(resp)
                    if (resp.result === false) {
                        $('#tip').text(resp.msg)
                    }else {
                        $('#tip').text('修改成功，正在跳转...')
                        setTimeout(function () {
                            location.href = '<%=request.getContextPath()%>/login'
                        },2000)
                    }
                })
            }
        })
    })
</script>
<script type="text/javascript" src="../js/canvas-particle.js"></script>
</body>
</html>